 <template>
   <view>
     <view class="state-box">
       <view class="headline">
         <view style="display:flex;justify-content:space-between">
           <view>ML202306120003-压缩机</view>
           <view class="texter" style="font-size: 20rpx;font-weight: 400;">
             已超期
           </view>
         </view>
         <!-- <view class="information">
           报修编号：KUIOB202306210016
         </view>
         <view class="information">
           保修人员：张楚岚
         </view> -->
       </view>
       <!-- <view style="display:flex;justify-content:space-evenly;flex-direction:column"> -->
       <view class="information">
         报修编号：KUIOB202306210016
       </view> 
        <view class="information">
         保修人员：张楚岚
       </view>
       <!-- </view> -->
     </view>

     <view class="box">
       <view class="info">
         <view class="information1">
           保养设备：
         </view>
         <view>
           ML202306120003-压缩机
         </view>
       </view>
       <view class="info">
         <view class="information1">
           设备型号：
         </view>
         <view>
           MK5698
         </view>
       </view>
       <view class="info">
         <view class="information1">
           设备类型：
         </view>
         <view>
           搅拌机械
         </view>
       </view>
       <view class="info">
         <view class="information1">
           所在位置：
         </view>
         <view>
           这是一个地址
         </view>
       </view>
     </view>

     <view class="box">
       <view class="info">
         <view class="information1">
           方案编号：
         </view>
         <view>
           DXJJ20230621003
         </view>
       </view>
       <view class="info">
         <view class="information1">
           方案名称：
         </view>
         <view>
           月度巡检
         </view>
       </view>
       <view class="info">
         <view class="information1">
           保养标准：
         </view>
         <view>
           设备正常使用
         </view>
       </view>
       <view class="info">
         <view class="information1">
           保养描述：
         </view>
         <view>
           更换零件
         </view>
       </view>
     </view>




     <view class="box">
       <view class="info">
         <view class="information1">
           备 &nbsp; &nbsp; &nbsp; 注：
         </view>
         <view>
           -
         </view>
       </view>
       <view class="info">
         <view class="information1">
           附 &nbsp; &nbsp; &nbsp; 件：
         </view>
         <view>
           -
         </view>
       </view>
     </view>


     <view class="box box1">
       <view class="info">
         <view class="information1">
           汇报时间：
         </view>
         <view>
           -
         </view>
       </view>
       <view class="info">
         <view class="information1">
           汇报人员：
         </view>
         <view>
           -
         </view>
       </view>
     </view>

   </view>
 </template>

 <script>
   export default {
     data() {
       return {

       };
     }
   }
 </script>

 <style lang="scss">
   .state-box {
     // width: 50px !important;
     // border-radius: 4px;
     // line-height: 46rpx;
     margin: 32rpx 32rpx 48rpx 32rpx;
     padding: 48rpx 0 32rpx 32rpx;
     // height: 450rpx;
     opacity: 1;
     border-radius: 20rpx;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

     .information {
       opacity: 0.3;
       /** 文本1 */
       font-size: 24rpx;
       font-weight: 400;
       color: rgba(0, 0, 0, 1);
       margin-top: 30rpx;
       
     }

     .headline {
       height: 38rpx;
       opacity: 1;
       /** 文本1 */
       font-size: 32rpx;
       font-weight: 700;
       letter-spacing: 0px;
       line-height: 38rpx;
       color: rgba(32, 37, 64, 1);
       text-align: left;
       vertical-align: top;
       width: 93%;
     }

   }

   .texter {
     background: linear-gradient(90deg, rgba(255, 87, 51, 0.1) 0%, rgba(212, 39, 0, 0.1) 100%);
     border-radius: 8rpx;
     width: 120rpx;
     height: 40rpx;
     line-height: 42rpx;
     text-align: center;
     font-size: 2rpx;
     font-weight: 400;
     color: rgba(255, 87, 51, 1);

   }


   .box {

     margin: 0 64rpx 35rpx 64rpx;

     opacity: 1;

     background: rgba(255, 255, 255, 1);
     border-bottom: 2rpx solid rgba(32, 37, 64, 0.06);

     .info {

       margin-bottom: 20rpx;

       .information1 {

         float: left;
         opacity: 0.3;
         /** 文本1 */
         font-size: 24rpx;
         font-weight: 400;
         color: rgba(0, 0, 0, 1);
       }
     }
   }

   .box1 {
     border-bottom: none
   }
  
 </style>